<!-- 导航栏 -->
<template>
  <div class="container-footer">
    <!-- 发布-模态框 -->
    <div v-show="showMoune" class="footer_module" @click="closeModel">
      <div class="footer_module_body">
        <ul class="f fa">
          <li @click="jump(3)">
            <img src="../assets/12.png" alt="" />
            <p>风险管理</p>
          </li>

          <li @click="jump(8)">
            <img src="../assets/13.png" alt="" />
            <p>进度认证</p>
          </li>
        </ul>
        <div class="close f">
          <img src="../assets/14.png" alt="" class="closeImg" />
        </div>
      </div>
    </div>
    <!-- 分包 -->
    <van-tabbar v-model="active" active-color="#13161C">
      <van-tabbar-item>
        <span>工作台</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.a1[0] : icon.a1[1]"
        />
      </van-tabbar-item>
      <van-tabbar-item>
        <span>智慧工地</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.a2[0] : icon.a2[1]"
        />
      </van-tabbar-item>
      <van-tabbar-item class="issue" @click="showMune">
        <span>发布</span>
        <img slot="icon" src="../assets/9.png" />
      </van-tabbar-item>
      <van-tabbar-item>
        <span>日报</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.a3[0] : icon.a3[1]"
        />
      </van-tabbar-item>
      <van-tabbar-item>
        <span>建造动态</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.a4[0] : icon.a4[1]"
        />
      </van-tabbar-item>
    </van-tabbar>
    <!-- 二维码扫码窗口 -->
    <div v-if="isShowQR">
      <qr @isShow="isShow"></qr>
    </div>
  </div>
</template>

<script type='textecmascript-6'>
// vuex
import { mapMutations } from "vuex";
import qr from "@/components/issue/QR/QR.vue";
export default {
  data() {
    return {
      showMoune: false,
      isShowQR: false, //是否显示扫码窗口
      active: this.$store.getters.pageActive, // tab导航下标
      icon: {
        a1: [require("../assets/2.png"), require("../assets/1.png")],
        a2: [require("../assets/11.png"), require("../assets/10.png")],
        a3: [require("../assets/8.png"), require("../assets/7.png")],
        a4: [require("../assets/6.png"), require("../assets/5.png")],
      },
    };
  },
  components: { qr },
  watch: {
    /**
     * 侦听全局导航tab切换
     */
    active(index) {
      console.log("%c 导航下标:", "color:DimGray", index);
      this.re_index(index);
      if (index == 2) {
        this.showMoune = true;
      } else {
        this.showMoune = false;
      }
      //导航路由
      this.$router.push({
        path: ["index", "wisdom-site", "", "report", "dynamic"][index],
      });
    },
  },
  methods: {
    ...mapMutations({
      re_index: "GET_PAGE_ACTIVE",
    }),
    // 显示发布模态框
    showMune() {
      this.showMoune = !this.showMoune;
    },

    // 发布模态框路由
    jump(n) {
      if (n == 1) {
        //扫码看模
        this.isShowQR = true;
      } else if (n == 2) {
        //沟通协调
        this.$router.push({ path: "/sponsorSee" });
      } else if (n == 3) {
        //日常巡查
        this.$router.push({ path: "/daily" });
      } else if (n == 4) {
        //人力资源
        this.$router.push({ path: "wisdom-site" });
      } else if (n == 5) {
        //物资采购
        this.$router.push({ path: "/purchase" });
      } else if (n == 6) {
        //材料出入库
        this.$router.push({ path: "/materials" });
      } else if (n == 7) {
        //整改认证
        this.$router.push({ path: "/abarbeitung" });
      } else if (n == 8) {
        //进度认证
        this.$router.push({ path: "/Progress" });
      }
    },
    //点击模态框--关闭发布
    closeModel() {
      this.showMoune = false;
    },
    isShow(flag) {
      console.log("是否显示扫码窗口");
      console.log(flag);
      this.isShowQR = flag;
    },
  },
};
</script>
<style lang='stylus' scoped rel='stylesheet/stylus'>
.container-footer {
  width: 100%;
  height: 98px;
}
</style>
<style>
.container-footer .van-tabbar-item {
  font-size: 24px;
}
.container-footer .van-icon:before {
  font-size: 30px;
}
/* .issue  .van-icon-plus:before{
  font-size:60px;
  position: absolute;
  top:-40px;
  left: -33px;
  text-align: center;
  background-color: #5A92FF;
  border-radius: 50%;
  padding: 15px;
  z-index: 10;
  color: white
} */
.container-footer .van-tabbar-item__text {
  margin-top: 5px;
  font-size: 20px;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  /* border:2px solid #EBEEF5; */
  z-index: 120;
}
.container-footer .issue .van-tabbar-item__text {
  margin-bottom: 30px;
}
.container-footer .van-tabbar--fixed {
  height: 98px;
  width: 750px;
  position: absolute;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.06);
}
.container-footer .van-tabbar-item__icon img {
  width: 48px;
  height: 46px;
}
.container-footer .issue .van-tabbar-item__icon img {
  width: 76px;
  height: 76px;
  z-index: 300;
  position: relative;
  margin-top: -2px;
}
.container-footer .footer_module {
  position: absolute;
  width: 750px;
  height: 100%;
  background-color: rgba(121, 121, 121, 0.8);
  left: 0;
  bottom: 0;
  z-index: 10000;
}
.container-footer .footer_module_body {
  height: 400px;
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
  /* background-color: #ffffff; */
  position: absolute;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
}
.closeImg {
  width: 110px;
  margin: 90px auto 0;
}
.container-footer .van-hairline--top-bottom {
  z-index: 600 !important;
}
.footer_module_body li {
  display: block;
  float: left;
  width: 25%;
  height: 160px;
  box-sizing: border-box;
  padding-top: 10px;
  text-align: center;
}
.footer_module_body li img {
  width: 110px;
  height: 110px;
}
.footer_module_body li p {
  padding-top: 10px;
  color: #fff;
  font-size: 30px;
}
</style>
